<template>
    <div>
    <span>
        <img src="../../assets/img/3.png" style="position: absolute;left:3px;z-index: 99;margin-top: 13px">
    </span>
        <el-card class="card-carousel">
            <el-carousel  class="push" :interval="4000" arrow="always">
                <el-carousel-item v-for="item in items" :key="item.id">
                    <a :href=item.link target="_blank">
                        <img :src=item.img alt="" class="carousel_img">
                    </a>
                    <h3>{{item.title}}</h3>
                </el-carousel-item>
            </el-carousel>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "head",
        data:function () {
            return{
                items:[{
                    id:1,
                    title:'',
                    img:require('../../assets/img/carousel/head1.jpg')
                },
                    {
                        id:2,
                        title:'',
                        img:require('../../assets/img/carousel/head2.jpg')
                    },
                    {
                        id:3,
                        title:'',
                        img:require('../../assets/img/carousel/head1.jpg')
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .el-carousel__item h3 {
        color: black;
        font-size: 15px;
        /*line-height: 300px;*/
        float: left;
        position: relative;
    }

    .card-carousel {

        width: 100%;
        height: 100%;
    }

    .push {
        margin-left: -21px;
        margin-top: -21px;
        margin-right: -21px;
    }

    .el-carousel__item:nth-child(2n) {
        background: black;
    }

    .el-carousel__item:nth-child(2n+1) {
        background: black;
    }

    .carousel_img {
        height: 100%;
        width: 100%;
        text-align: center;
    }

</style>
